@import "vars";

body#bugs-index {
  #filter {
    font-size: 11px;

    select, input {
      font-size: 11px;
      font-weight: normal;
      width: auto;
    }
  }
}

body#bugs-show {
  // ----- GLOBAL PORTION

  h1 {
    border-bottom: 1px solid $gray5;
    padding-bottom: 20px;
  }

  a#watch {
    color: $orange;
    float: right;
    text-decoration: none;
    &:hover { cursor: pointer; }
  }

  #location {
    font-weight: bold;
    .aux { font-weight: normal; }
  }

  #editor-links {
    font-family: Menlo, sans-serif;
    margin: 5px 40px;

    a { text-decoration: none; }
  }

  // ----- HISTORY

  #histogram {
    width: 100%;
    height: 200px;

    .deploy-tooltip {
      cursor: pointer;
      bottom: 0;
      width: 3px;
      height: 200px;
      position: absolute;
    }
  }

  // ----- GIT BLAME

  summary {
    font-size: $h5-size;
    margin-bottom: 10px;
  }

  .diff {
    span.additions-deletions { float: right; }
    span.additions { color: darkgreen; }
    span.deletions { color: red; }
    .syntaxhighlighter { margin: 0 !important; }
  }

  // ----- MANAGEMENT

  #management-form {
    .comment {
      padding-top: 10px;
      textarea { width: 100%; }
    }

    #jira-name { margin-top: 10px; }

    ul.autocomplete>li {
      display: -webkit-box;
      display: -moz-box;
      display: box;

      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
      box-orient: horizontal;

      div {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;

        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      tt {
        display: block;
        text-align: right;
        padding-left: 10px;
      }
    }
  }

  // ----- COMMENTS

  .comment {
    &>img {
      margin-bottom: 0;
      position: relative;
      top: 6px;
    }

    .comment-author {
      margin-bottom: 0;

      a { text-decoration: none; }

      img {
        height: 32px;
        vertical-align: middle;
        margin-right: 10px;
      }

      .times {
        font-size: 12px;
        font-weight: normal;
        position: relative;
        top: 10px; // shift down to the center of the div
        float: right;
      }
    }

    .comment-body {
      .actions { text-align: right; }

      background-color: white;
      padding-left: 8px;
      padding-right: 8px;
      padding-top: 12px;
      padding-bottom: 1px;
      border-radius: 6px;
      border-top-left-radius: 0;
    }

    textarea {
      background-color: white;
      border-bottom: 1px solid $gray5;
    }

    margin-bottom: 20px;
  }

  // ----- OCCURRENCES

  #aggregation-options {
    position: relative;
    width: 100%;

    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;

    @include iphone-landscape-and-smaller { display: block; }

    &>div {
      padding-left: 5px;
      padding-right: 5px;

      &:not(#agg-submit) {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
      }

      &:first-child { padding-left: 0; }
      &:last-child { padding-right: 0; }

      @include iphone-landscape-and-smaller { padding: 0; }
    }
  }

  #aggregation-charts {
    margin-top: 20px;

    .aggregation-dim {
      width: 100%;
      height: 150px;
      margin-top: 20px;
      &:first-child { margin-top: 0; }

      .legend { display: none; z-index: 1000; }
      .legend > * { background-color: rgba(white, 0.75); z-index: 1000; }
      &:hover .legend { display: inherit; }
    }

    table {
      width: auto;

      td {
        vertical-align: middle;
        padding: 2.5px;
      }
    }
  }
}

